<template>
    <view class="user-border right-box">
        <view class="user-border user-border-2" @click="goEditMsg">
            <image class="userinfo-avatar" :src="avatarUrl" mode="cover"></image>

            <view class="a-tags" v-if="userInfo.memberTypeId">
                <!-- 过期 -->
                <view v-if="isTimeOut == 2">
                    <text class="flag-text out">已过期</text>
                </view>
                <view v-else>
                    <view v-if="userInfo.memberTypeId == 1  ">
                        <image src="/static/images/gold.png" mode="aspectFit" lazy-load="false" />
                    </view>
                    <view v-else-if="userInfo.memberTypeId == 2  ">
                        <image src="/static/images/plat.png" mode="aspectFit" lazy-load="false" />
                    </view>
                    <view v-else>
                        <text class="flag-text">体验</text>
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>
<script>

const defaultAvatarUrl =
    "https://mmbiz.qpic.cn/mmbiz/icTdbqWNOwNRna42FI242Lcia07jQodd2FJGIYQfG0LAJGFxM4FbnQP6yfMxBgJ0F3YRqJCJ1aPAK2dQagdusBZg/0";
export default {
    props:[ 'showTimeOut' , 'showOutTime' ],
    components: {},
    data () {
        return {

        }
    },
    computed: {
        userId () { return this.$store.getters.userId },
        userInfo () { return this.$store.getters.userInfo },
        wechatInfo () { return this.$store.getters.wechatInfo },
        avatarUrl () { return this.$store.getters.wechatInfo.headimgurl || defaultAvatarUrl},
        termOfValidity () { return this.$store.getters.userInfo.termOfValidityDate },
        //是否过期 0无 1正常 2过期
        isTimeOut () {

            let termOfValidity = this.$store.getters.userInfo.termOfValidityDate

            if (termOfValidity) {

                let now = new Date().getTime()

                let termOfValidityDate = new Date(termOfValidity).getTime()

                return now > termOfValidityDate ? 2 : 1
            }

            return 0

        },
        //显示的时间 不要时分秒
        showTimeStr () {
            let termOfValidity = this.$store.getters.userInfo.termOfValidityDate

            if (termOfValidity) {

                return termOfValidity.split(' ')[0]
            }

            return ''
        }
    },
    mounted () {

        this.$emit('update:showTimeOut', this.isTimeOut)
        this.$emit('update:showOutTime', this.showTimeStr)

    },

    methods: {

        //打开会员 1：正常打开 2黄金续费 3铂金续费  4升级
        openMember (type) {

            if (type == 4) {

                this.$goNext('/pages/member/upgrade')
            }
            else if (type == 3) {

                this.$goNext('/pages/member/index?mode=plat')
            }
            else if (type == 2) {

                this.$goNext('/pages/member/index?mode=gold')

            }
            else {
                this.$goNext('/pages/member/index')
            }
        },
        goEditMsg () {

            //未登录
            if (!this.userId) {

                this.$emit('goLogin')

                return
            }

            this.$goNext('/pages/authInfo/index')

        },

    }
}
</script>
<style lang="scss" scoped>
.user-border {
    border: 1px solid #ffe9dc;
    padding: 10rpx;
    display: inline-block;
    border-radius: 50%;
    font-size: 0;
}
.user-border-2 {
    border-color:1px solid #ffe9dc;
    padding: 10rpx;
    position: relative;
}
.userinfo-avatar {
    overflow: hidden;
    width: 120rpx;
    height: 120rpx;
    border-radius: 50%;
    font-size: 0;
}
.a-tags {
    position: absolute;
    height: 42rpx;
    text-align: center;
    border-radius: 50%;
    right: -20rpx;
    bottom: 10rpx;
    image {
        width: 42rpx;
        height: 42rpx;
        border-radius: 50%;
    }
    .flag-text {
        display: block;
        color: #fff;
        background: #999;
        font-size: 17rpx;
        padding: 0 6rpx;
        border-radius: 10rpx;
        height: 42rpx;
        line-height: 42rpx;
        &.out{
            color: #fff;
            background: #ff0000;
        }
    }
}
</style>